<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>可折叠的内容 Collapsible content-JQUERY MOBILE 中文API站</title>
<meta name="keywords" content="JQUERY MOBILE 1.0正式版中文手册,Jquery Mobile 1.0,Jquery mobile,移动框架开发手册,darklord,JQUERY MOBILE 1.0正式版,JQUERY API,jqmapi,jqm,jquery," />
<meta name="description" content="Jquery mobile中文API站，Jquery mobile 1.0正式版本中文手册，提供最新版Jquery mobile移动web与应用开发帮助。" />
<link rel="stylesheet" type="text/css" href="../../style/Jqueryapi.css" tppabs="http://www.jqmapi.com/style/Jqueryapi.css" />
<script type="text/javascript" src="../../style/lib/Jquery126.js" tppabs="http://www.jqmapi.com/style/lib/Jquery126.js"></script>
 </script>
<script type="text/javascript" src="../../style/Jqueryapi.js" tppabs="http://www.jqmapi.com/style/Jqueryapi.js"></script>
<link rel="shortcut icon" href="../../style/img/favicon.ico" />
</head>
<body>
<div class="nav">
<iframe width="250px" scrolling="no" frameborder="0" allowtransparency="true" src="../../nav.html" tppabs="http://www.jqmapi.com/nav.html" height="1300px"></iframe>
</div>
<div class="main">
<script src="style/jqmapi.js" tppabs="http://www.jqmapi.com/componts/formats/style/jqmapi.js" type="text/javascript"></script><hr style="color:#595959;" />
<div class="content">
<h1>可折叠的内容 Collapsible content markup</h1>

				<div class="desc"><div>要创建一个可折叠的区块，先创建一个容器，然后给容器添加data-role="collapsible"属性</div></div>
				<div class="desc">
				  <div>容器内直接的标题（h1-h6)子结点，Jquery Mobile会将之表现为可点击的按钮，并在左侧添加一个“+"按钮，表示是可以展开的</div></div>
      <div class="desc">
				  <div>在头部后面你可以添加任何想要折叠的html标记。框架会自动把这些标记包裹在一个容器里用以折叠或显</div></div>
				<div class="code">&lt;div data-role=&quot;collapsible&quot;&gt;<br /> 
				  　
&lt;h3&gt;I'm a header&lt;/h3&gt;<br /> 
　
&lt;p&gt;I'm the collapsible content. By default I'm open and displayed on the page, but you can click the header to hide me.&lt;/p&gt;<br />
&lt;/div&gt;</div>
<img src="../../images/Collapsible content_1.png" tppabs="http://www.jqmapi.com/images/Collapsible%20content_1.png">

      <div class="desc">
				  <div>如上所示：默认情况下，可折叠容器是展开的，可以通过通过点击头部收缩。给折叠的容器添加data-collapsed="true"的属性，可以设为默认收缩</div></div>
                  
 				<div class="code">&lt;div data-role=&quot;collapsible&quot; <strong>data-collapsed=&quot;true&quot;&gt;</strong></div>
             <br>     
<div class="desc">
				  <div>可折叠的内容采用了精简的样式，我们仅仅在内容和标题间添加了一些margin，标题则采用它所在容器的默认主题</div></div>           
<h1>嵌套的折叠 Nested Collapsibles</h1>
<img src="../../images/Collapsible content_3.png" tppabs="http://www.jqmapi.com/images/Collapsible%20content_3.png">
<h1>折叠组 Collapsible sets</h1>

      <div class="desc">
				  <div>通过给父容器添加data-role="collapsible-set"属?然后每一个子容器data-role="collapsible"属性，可以让容器展开时，其他容器被折叠的效果，类似手风琴组件</div></div>
<img src="../../images/Collapsible content_2-1.png" tppabs="http://www.jqmapi.com/images/Collapsible%20content_2.png">
</div>
</div>

</body>
</html>



